<!DOCTYPE html>
<html  >
<head>
    <meta charset="utf-8" />
	<title>New Document</title>
 <style>  
 
 #testimg {
  max-width: 100%;
  width: 600px;
}

 #testimg {

  animation: haunted 3s infinite;
}

@keyframes haunted {
  0% {
    -webkit-filter: brightness(20%);
    filter: brightness(20%);
  }
  48% {
    -webkit-filter: brightness(20%);
    filter: brightness(20%);
  }
  50% {
    -webkit-filter: sepia(1) contrast(2) brightness(200%);
    filter: sepia(1) contrast(2) brightness(200%);
  }
  60% {
    -webkit-filter: sepia(1) contrast(2) brightness(200%);
    filter: sepia(1) contrast(2) brightness(200%);
  }
  62% {
    -webkit-filter: brightness(20%);
    filter: brightness(20%);
  }
  96% {
    -webkit-filter: brightness(20%);
    filter: brightness(20%);
  }
  96% {
    -webkit-filter: brightness(400%);
    filter: brightness(400%);
  }
}
 #testimg2 {
  max-width: 100%;
  width: 600px;
}

 #testimg2 {
  animation: haunted2 3s infinite;
}

@keyframes haunted2 {
  0% {
    -webkit-filter: brightness(20%);
    filter: brightness(20%);
  }
 28% {
  -webkit-filter: brightness(20%);
  filter: brightness(20%);
 }
 30% {
  -webkit-filter: sepia(1) contrast(2) brightness(400%);
  filter: sepia(1) contrast(2) brightness(300%);
 }
 32% {
  -webkit-filter: sepia(1) contrast(2) brightness(20%);
  filter: sepia(1) contrast(2) brightness(20%);
 }
 48% {
  -webkit-filter: brightness(20%);
  filter: brightness(20%);
 }
 50% {
  -webkit-filter: sepia(1) contrast(2) brightness(400%);
  filter: sepia(1) contrast(2) brightness(300%);
 }
 52% {
  -webkit-filter: sepia(1) contrast(2) brightness(20%);
  filter: sepia(1) contrast(2) brightness(20%);
 }
  62% {
    -webkit-filter: brightness(200%);
    filter: brightness(200%);
  }
  
  64% {
    -webkit-filter: brightness(20%);
    filter: brightness(20%);
  }
  96% {
    -webkit-filter: brightness(200%);
    filter: brightness(200%);
  }
  96% {
    -webkit-filter: brightness(20%);
    filter: brightness(20%);
  }
}
#mydiv{
 background-image:  url("../img/a.png");
}

 #mydiv {
  animation: mydivimg 1s infinite;
 }
 @keyframes mydivimg {
   20%{ background-image: url("../img/a.png");}
  50%{ background-image: url("../img/b.jpg");}
  75%{ background-image: url("../img/c.jpg");}
 }
</style>

 
</head>
<body >
<div id="mydiv" style="width: 600px;height: 600px;border: 1px #000 solid"></div>

	亮度 Brightness<br/> 
 <img src="../img/a.png" width="500px" style="filter: brightness(150%);"/>  <img src="../img/a.png" width="500px"/><br/> 
 
	对比度 Contrast<br/> 
 <img src="../img/a.png" width="500px" style="filter: contrast(200%);"/>  <img src="../img/a.png" width="500px"/><br/> 
 饱和度 Saturate<br/>
 <img src="../img/b.jpg" width="500px" style="filter: saturate(50%);"/>  <img src="../img/b.jpg" width="500px"/><br/> 
 灰度 Grayscale<br/> 
 <img src="../img/b.jpg" width="500px" style="filter: grayscale(100%); "/>  <img src="../img/b.jpg" width="500px"/><br/> 
 褐色Sepia<br/> 
 <img src="../img/b.jpg" width="500px" style="filter: sepia(200%); "/>  <img src="../img/b.jpg" width="500px"/><br/> 
 色相旋转Hue-rotate<br/> 
 <img src="../img/b.jpg" width="500px" style=" filter: hue-rotate(180deg);"/>  <img src="../img/b.jpg" width="500px"/><br/> 
 反色Invert<br/> 
 <img src="../img/b.jpg" width="500px" style=" filter: invert(100%);"/>  <img src="../img/b.jpg" width="500px"/><br/> 


 模糊Blur  <br/> 
 <img src="../img/b.jpg" width="500px" style=" filter: blur(12px);"/>  <img src="../img/b.jpg" width="500px"/><br/>
  阴影Drop Shadow此属性需要X和Y的偏移，以及隐隐的颜色。也可以设置一个模糊半径。<br/> 
 <img src="../img/b.jpg" width="500px" style="filter: drop-shadow(5px 5px 10px #666);"/>  <img src="../img/b.jpg" width="500px"/><br/> 
 组合滤镜和动画滤镜(Combining and Animating Filters) <br/> 
 <img src="../img/c.jpg" width="500px"  />
    <img src="../img/c.jpg" width="500px" id="testimg"/>
    <img src="../img/c.jpg" width="500px" id="testimg2"/><br/>
<br>  
</body>
</html>
